<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-icon" data-background-color="rose">
            <i class="material-icons">assignment</i>
          </div>
          <div class="card-content">
            <h4 class="card-title">所有职位</h4>
          </div>
          <div class="card-content">
            <!-- Main row -->
            <div class="box-header">
              <div class="box-tools pull-right form-inline">
                <span class="input-group hidden-xs hidden-sm" style="width:200px">
                  <input type="text" class="form-control" placeholder="请输入关键词" [(ngModel)]="searchKeywords">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="button" (click)="clearKeywords()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="清空关键词">
                      <i class="fa fa-eraser"></i>
                    </button>
                    <button class="btn btn-default btn-sm" type="button" (click)="displayData()" data-container="body" data-toggle="popover"
                      data-trigger="hover" data-placement="top" data-content="搜索">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </span>
                <button type="button" class="btn btn-info btn-sm" (click)="displayData()" data-container="body" data-toggle="popover" data-trigger="hover"
                  data-placement="top" data-content="刷新">
                  <i class="fa fa-refresh"></i>
                </button>
                <button *ngIf="showAdd" type="button" class="btn btn-success btn-sm" (click)="toAdd()">添加</button>
                <button *ngIf="showModify" type="button" class="btn btn-warning btn-sm" (click)="toModify()">修改</button>
                <button *ngIf="showDelete" type="button" class="btn btn-danger btn-sm" (click)="toDelete()">删除</button>
              </div>
            </div>
            <!-- /.box-header -->
            <table class="table">
              <thead class="text-primary">
                <tr>
                  <th style="width:20px">
                    <input type="checkbox" (click)="checkAll()" [(ngModel)]="checkedAll">
                  </th>
                  <th (click)="sort('positionId')" [class.sorting]="orderBy!='positionId'" [class.sorting_asc]="orderBy=='positionId'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='positionId'&&orderType=='desc'">职位id</th>
                  <th (click)="sort('positionName')" [class.sorting]="orderBy!='positionName'" [class.sorting_asc]="orderBy=='positionName'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='positionName'&&orderType=='desc'">职位名称</th>
                  <th (click)="sort('positionCode')" [class.sorting]="orderBy!='positionCode'" [class.sorting_asc]="orderBy=='positionCode'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='positionCode'&&orderType=='desc'" class="hidden-xs">职位Code</th>
                  <th (click)="sort('isLocked')" [class.sorting]="orderBy!='isLocked'" [class.sorting_asc]="orderBy=='isLocked'&&orderType=='asc'"
                    [class.sorting_desc]="orderBy=='isLocked'&&orderType=='desc'" class="hidden-xs hidden-sm hidden-md">是否锁定</th>
                  <th class="hidden-xs hidden-sm hidden-md">所属集团</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let position of positions">
                  <td style="width:20px">
                    <input type="checkbox" (click)="check(position.positionId)" value="{{position.positionId}}" class="position-list">
                  </td>
                  <td>{{position.positionId}}</td>
                  <td>{{position.positionName}}</td>
                  <td class="hidden-xs">{{position.positionCode}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{position.isLocked}}</td>
                  <td class="hidden-xs hidden-sm hidden-md">{{position.otherResults.groupName}}</td>
                  <td>
                    <button *ngIf="showUserJobRoles" type="button" class="btn btn-xs btn-warning" (click)="manageUserJobRoles(position.positionId,position.positionName)">管理人员Roles</button>
                    <button *ngIf="!position.isLocked&&showLock" (click)="lock(position.positionId)" type="button" class="btn btn-xs btn-danger">锁定</button>
                    <button *ngIf="position.isLocked&&showUnlock" (click)="unlock(position.positionId)" type="button" class="btn btn-xs btn-success">解锁</button>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- /.box-body -->
            <div class="box-footer clearfix no-border">
              <div class="pull-right">
                <app-pagination [pageNo]="pageNo" [pageSize]="pageSize" [totalPages]="totalPages" [total]="total" (pageNoChange)="goToPage($event)"
                  (pageSizeChange)="setPageSize($event)"></app-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">添加职位</h4>
      </div>
      <div class="modal-body">
        <div class="form-group form-inline">
          职位名称：
          <input type="text" id="to-add-position-name" class="form-control" placeholder="请输入用户名" [(ngModel)]="toAddPositionName">
        </div>
        <div class="form-group form-inline">
          职位Code：
          <input type="text" id="to-add-position-code" class="form-control" placeholder="请输入密码" [(ngModel)]="toAddPositionCode">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="add()">添加</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="modifyModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modifyModalLabel">修改职位</h4>
      </div>
      <div class="modal-body">
        <div class="form-group form-inline">
          职位名称：
          <input type="text" id="to-modify-position-name" class="form-control" placeholder="请输入用户名" [(ngModel)]="toModifyPositionName"
            readonly>
        </div>
        <div class="form-group form-inline">
          职位Code：
          <input type="text" id="to-modify-position-code" class="form-control" placeholder="请输入密码" [(ngModel)]="toModifyPositionCode">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" (click)="modify()">修改</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>
<div class="modal fade" id="jobUserRolesModal" tabindex="-1" role="dialog" aria-labelledby="jobUserRolesModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width: 90%">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="jobUserRolesModalLabel">管理人员Roles</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div id="minLoading" class="loading">正在加载数据……</div>
            <div class="col-md-12">
              <div class="card">
                <div class="card-header card-header-icon" data-background-color="rose">
                  <i class="material-icons">assignment</i>
                </div>
                <div class="card-content">
                  <h4 class="card-title">{{userJobRolesPositionName}}</h4>
                  <!-- Main row -->
                  <div class="box-header">
                    <div class="box-tools pull-right form-inline">
                      <span class="input-group hidden-xs hidden-sm" style="width:200px">
                        <input type="text" class="form-control" placeholder="请输入关键词" [(ngModel)]="minSearchKeywords">
                        <span class="input-group-btn">
                          <button class="btn btn-default btn-sm" type="button" (click)="clearMinKeywords()" data-container="body" data-toggle="popover"
                            data-trigger="hover" data-placement="top" data-content="清空关键词">
                            <i class="fa fa-eraser"></i>
                          </button>
                          <button class="btn btn-default btn-sm" type="button" (click)="displayMinData()" data-container="body" data-toggle="popover"
                            data-trigger="hover" data-placement="top" data-content="搜索">
                            <i class="fa fa-search"></i>
                          </button>
                        </span>
                      </span>
                      <button type="button" class="btn btn-info btn-sm" (click)="displayMinData()" data-container="body" data-toggle="popover"
                        data-trigger="hover" data-placement="top" data-content="刷新">
                        <i class="fa fa-refresh"></i>
                      </button>
                      <button *ngIf="showDeleteUserJobRoles" type="button" class="btn btn-danger btn-sm" (click)="toDeleteUserJobRoles()">删除选中角色</button>
                    </div>
                  </div>
                  <!-- /.box-header -->
                  <table class="table">
                    <thead class="text-primary">
                      <tr>
                        <th style="width:20px">
                          <input type="checkbox" (click)="checkAllUserJobRoles()" [(ngModel)]="checkedAllUserJobRoles">
                        </th>
                        <th (click)="minSort('jobId')" [class.sorting]="minOrderBy!='jobId'" [class.sorting_asc]="minOrderBy=='jobId'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='jobId'&&minOrderType=='desc'">身份id</th>
                        <th (click)="minSort('userId')" [class.sorting]="minOrderBy!='userId'" [class.sorting_asc]="minOrderBy=='userId'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='userId'&&minOrderType=='desc'">用户id</th>
                        <th (click)="minSort('username')" [class.sorting]="minOrderBy!='username'" [class.sorting_asc]="minOrderBy=='username'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='username'&&minOrderType=='desc'">用户名</th>
                        <th (click)="minSort('realname')" [class.sorting]="minOrderBy!='realname'" [class.sorting_asc]="minOrderBy=='realname'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='realname'&&minOrderType=='desc'" class="hidden-xs">真实姓名</th>
                        <th (click)="minSort('nickname')" [class.sorting]="minOrderBy!='nickname'" [class.sorting_asc]="minOrderBy=='nickname'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='nickname'&&minOrderType=='desc'" class="hidden-xs hidden-sm">昵称</th>
                        <th (click)="minSort('email')" [class.sorting]="minOrderBy!='email'" [class.sorting_asc]="minOrderBy=='email'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='email'&&minOrderType=='desc'" class="hidden-xs hidden-sm">电子邮箱</th>
                        <th (click)="minSort('cellphone')" [class.sorting]="minOrderBy!='cellphone'" [class.sorting_asc]="minOrderBy=='cellphone'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='cellphone'&&minOrderType=='desc'" class="hidden-xs hidden-sm">手机</th>
                        <th (click)="minSort('isLocked')" [class.sorting]="minOrderBy!='isLocked'" [class.sorting_asc]="minOrderBy=='isLocked'&&minOrderType=='asc'"
                          [class.sorting_desc]="minOrderBy=='isLocked'&&minOrderType=='desc'" class="hidden-xs hidden-sm hidden-md">是否锁定</th>
                        <th class="hidden-xs hidden-sm hidden-md">所属集团</th>
                        <th class="hidden-xs hidden-sm hidden-md">组织机构</th>
                        <th class="hidden-xs hidden-sm hidden-md">职位</th>
                        <th class="hidden-xs hidden-sm hidden-md">角色</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let user of jobUserRoles">
                        <td style="width:20px">
                          <input type="checkbox" (click)="checkUserJobRole()" value="{{user.otherResults.id}}" class="job-list">
                        </td>
                        <td>{{user.otherResults.jobId}}</td>
                        <td>{{user.userId}}</td>
                        <td>{{user.username}}</td>
                        <td class="hidden-xs">{{user.realname}}</td>
                        <td class="hidden-xs hidden-sm">{{user.nickname}}</td>
                        <td class="hidden-xs hidden-sm">{{user.email}}</td>
                        <td class="hidden-xs hidden-sm">{{user.cellphone}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.isLocked}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.groupName}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.orgName}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.positionName}}</td>
                        <td class="hidden-xs hidden-sm hidden-md">{{user.otherResults.roleName}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <!-- /.box-body -->
                  <div class="box-footer clearfix no-border">
                    <div class="pull-right">
                      <app-pagination [pageNo]="minPageNo" [pageSize]="minPageSize" [totalPages]="minTotalPages" [total]="minTotal" (pageNoChange)="goToMinPage($event)"
                        (pageSizeChange)="setMinPageSize($event)"></app-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>